<template>
	<view class="uiwu" :style="{'background-image':`url(${uiwu.imgUrl}yuandian.png)`}">
		<uiwu-tab-header headerIndex="3" />
		<view class="uiwu-border"></view>
		<view class="uiwu-user">
			<view class="uiwu-user-ino">
				<view class="top uiwu-flex-align" @tap.stop="uiwu.openWindow('/pages/user/information')">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="in">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="uiwu-flex-align vip">
							<text class="id">ID：{{userInfo.uid}}</text>
							<view class="svip uiwu-flex-align" v-if="userInfo.is_vip">
								<image src="/static/vip.png" mode="widthFix"></image>
								<text>VIP会员</text>
							</view>
						</view>
					</view>
					<uiwu-icon type="arrowright" size="24" color="#FFF" />
				</view>
				<view class="bottom uiwu-flex-align">
					<view class="item uiwu-flex-center" @tap.stop="uiwu.openWindow('/pages/prize/prize')">
						奖品<text>{{userInfo.grab_prize_num || 0}}</text>
					</view>
					<view class="item uiwu-flex-center" @tap.stop="uiwu.openWindow('/pages/user/coupon')">
						卡券<text>{{userInfo.coupon_num || 0}}</text>
					</view>
				</view>
			</view>
			<view class="uiwu-list uiwu-flex">
				<view v-for="(item,index) in menulist" :key="index" :class="!item.isShow ? 'active' : ''">
					<view
						class="uiwu-list-item uiwu-flex-center uiwu-flex-column" 
						v-if="item.isShow"
						@tap.stop="openWidnow(item)"
					>
						<image :src="`/static/user${index+1}.png`" mode="widthFix"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<uiwu-tabBar :cuont="3" />
	</view>
</template>

<script setup lang="ts">
	import { useStore } from 'vuex';
	import { onLoad , onShow } from '@dcloudio/uni-app';
	import { ref , inject , toRef , useExpose} from "vue";
	import { uiwu } from "@/config/config";
	import { userInfo as getUserInfofun } from '@/api/api';
	const store = inject<any>('store');
	const userInfo = toRef(store.state,'userInfo')
	const stores = useStore();
	const increment = (data,type) => {
	    stores.commit(type, data);
	};
	const menulist = ref([{
		name:'会员中心',
		url:'/pages/member/member',
		isShow:true
	},{
		name:'分销中心',
		url:'/pages/distribution/distribution',
		isShow:true
	},{
		name:'任务中心',
		url:'/pages/user/task',
		isShow:true
	},{
		name:'积分订单',
		url:'/pages/pointsmall/order',
		isShow:true
	},{
		name:'游戏记录',
		url:'/pages/index/record',
		isShow:true
	},{
		name:'售后记录',
		url:'/pages/AfterSales/list',
		isShow:true
	},{
		name:'收货地址',
		url:'/pages/user/address',
		isShow:true
	},{
		name:'在线客服',
		url:'/pages/user/service',
		isShow:true
	},{
		name:'大神榜',
		url:'/pages/user/ranking',
		isShow:true
	},{
		name:'系统设置',
		url:'/pages/user/setting',
		isShow:true
	}])
	const openWidnow = (item:object) : void => {
		if(item.name == '在线客服'){
			// 跳转企业微信客服 
			// #ifdef APP-PLUS
			plus.share.getServices((res)=>{
				const wechat = res.find(i=> i.id == 'weixin');
				if(!wechat) uiwu.toast('当前环境不支持微信操作')
				wechat.openCustomerServiceChat({
					corpid:'ww90e13ae096ee9b31',
					url:'https://work.weixin.qq.com/kfid/kfc4291129dc4d1b65c'
				})
			})
			// #endif
			// #ifndef APP-PLUS
			// uni.openCustomerServiceChat()
			// #endif
			return
		} 
		uiwu.openWindow(item.url)
	}
	const getUserInfo = async () => {
		const {data} = await getUserInfofun();
		increment(data,'set_user')
	}
	onShow(()=>{
		getUserInfo()
		menulist.value.forEach((val)=>{
			if(val.name == '分销中心'){
				val.isShow = userInfo.value.brokerage_func_status ? true : false
			}
			if(val.name == '会员中心'){
				val.isShow = userInfo.value.is_show_member ? true : false
			}
		})
	})
</script>

<style lang="scss" scoped>
	.uiwu{
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #FDD134;
		padding-bottom: 22rpx;
		background-size: 100% 100%;
		min-height: 100vh;
	}
	.uiwu-border{
		width: 100%;
		height: 6rpx;
		background: #EF821E;
	}
	.uiwu-user{
		width: 100%;
		height: 1060rpx;
		background: url('../../static/userbg.png') no-repeat 0 0;
		background-size: 100% 100%;
		margin-top: -12rpx;
		padding-top: 40rpx;
		&-ino{
			height: 300rpx;
			// background-color: #f00;
			.top{
				height: 178rpx;
				padding: 34rpx 44rpx;
				padding-right: 74rpx;
				>image{
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
				.in{
					flex: 1;
					.name{
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
					}
					.vip{
						.id{
							font-size: 28rpx;
							font-weight: 400;
							color: #FCE5C7;
						}
						.svip{
							margin-left: 25rpx;
							width: 108rpx;
							height: 32rpx;
							background: rgba(0,0,0,0.2);
							border-radius: 16rpx;
							border: 2rpx solid #231815;
							image{
								width: 36rpx;
								margin-left: -11rpx;
							}
							text{
								font-size: 20rpx;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}
				}
			}
			.bottom{
				height: calc(300rpx - 178rpx);
				.item{
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #666666;
					text{
						font-size: 36rpx;
						font-weight: bold;
						color: #231815;
						margin-left: 16rpx;
					}
				}
			}
		}
	}
	.uiwu-list{
		flex-wrap: wrap;
		padding: 0 44rpx 0 24rpx;
		margin-top: 80rpx;
		>view{
			width: 25%;
			padding: 20rpx 0;
			&.active{
				width: 0;
				padding: 0;
			}
		}
		&-item{
			width: 100%;
			// width: 25%;
			// padding: 20rpx 0;
			image{
				width: 60rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #444444;
				margin-top: 8rpx;
			}
		}
	}
</style>
